import React from 'react'
import PropTypes from 'prop-types'
import {Avatar, Table} from 'antd'
import config from 'config'
import {Link} from 'react-router-dom'
import {getChatroomLink, getCustomerLink, getOperatorLink} from 'utils/tabs'
import classnames from 'classnames'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const List = ({
                openTab, dispatch, isMotion, ...tableProps
              }) => {

  const getAvatarText = (record) => {
    const {chatroomName, chatroomId} = record
    if (chatroomName) {
      return chatroomName.substr(0, 1)
    } else if (chatroomId) {
      return chatroomId.substr(0, 1).toUpperCase()
    }

  }

  const columns = [
    {
      title: '群头像',
      dataIndex: 'chatroomIcon',
      key: 'chatroomIcon',
      width: 100,
      fixed: 'left',
      render: (avatar, record, index) => avatar ? <Avatar src={avatar} size="large"/> :
        <Avatar style={{backgroundColor: config.randomColor(index), verticalAlign: 'middle'}}
                size="large">{getAvatarText(record)}</Avatar>,
    }, {
      title: '群ID',
      dataIndex: 'chatroomId',
      key: 'chatroomId',
      width: 120,
      render: (chatroomId, record) => getChatroomLink(record, dispatch),
    }, {
      title: '群聊名称',
      dataIndex: 'chatroomName',
      key: 'chatroomName',
      width: 120,
    }, {
      title: '录入系统时间',
      dataIndex: 'ctime',
      key: 'ctime',
      width: 120,
    }, {
      title: '群主微信号',
      dataIndex: 'dchatroomOwnerWxId',
      key: 'dchatroomOwnerWxId',
      width: 100,
      render: (_, record) => getCustomerLink({
        cid: record.customerId,
        owxId: record.operatorWxId.wxId,
        name: _,
        val: _,
      }, dispatch),
    }, {
      title: '是否在本群',
      dataIndex: 'isInChatroom',
      key: 'isInChatroom',
      width: 100,
      render: val => val ? '是' : '否',
    }, {
      title: '归属微信',
      dataIndex: 'operatorWxId',
      key: 'operatorWxId',
      width: 120,
      render: val => getOperatorLink({wxId: val.wxId, wxNo: val.wxNo}, dispatch),
    }, {
      title: '归属员工',
      dataIndex: 'operatorWxId.belongEmp',
      key: 'belongEmpId',
      width: 100,
      render: (val) => val ? val.username : '',
    }, {
      title: '群人数',
      dataIndex: 'chatroomPeopleNum',
      key: 'chatroomPeopleNum',
      width: 100,
      render: val => val ? val : '0',
    }, {
      title: '群公告',
      dataIndex: 'chatroomNotice',
      key: 'chatroomNotice',
      width: 120,
    }, {
      title: '群二维码',
      dataIndex: 'chatroomQrcode',
      key: 'chatroomQrcode',
      width: 180,
      render: val => val ? val : '-',
    }, {
      title: '查看聊天记录',
      dataIndex: 'fcType',
      key: 'fcType',
      width: 120,
      render: (_, record) => <Link to={'/chatroom/'.concat(record.id)} onClick={() => {
        openTab(record)
      }}>详情</Link>,
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table)}
      scroll={{x: 1800}}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default List
